<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min1.css"/>
	
		<link rel="stylesheet" type="text/css" href="css/pan3/pzk3.css"/>
		<link rel="icon" href="img/position/favicon.ico" />
		<style type="text/css">
			
		</style>

		
	<body>
		
				<header>
			<img src="img/pan3/menu.png" class="menu"/>
			<div class="menus">
				<p class="li"><a href="index.html">首页</a><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></p>
				<p class="li"><a href="index5.html">发现</a></p>
					<p class="li1"><a href="">平面</a></p>
					<p class="li1"><a href="">UI</a></p>
					<p class="li1"><a href="">插画</a></p>
					<p class="li1"><a href="">动漫</a></p>
					<p class="li1"><a href="">摄影</a></p>
					<p class="li1"><a href="">空间</a></p>
					<p class="li1"><a href="">工业/产品</a></p>
					<p class="li1"><a href="">三维</a></p>
					<p class="li1"><a href="">手工艺</a></p>
					<p class="li1"><a href="">纯艺术</a></p>
					<p class="li1"><a href="">服装</a></p>
					<p class="li1"><a href="">其他</a></p>
					<p class="li1"><a href="">精选作品</a></p>
					<p class="li1"><a href="">精选文章</a></p>
					<p class="li1"><a href="">精选收藏</a></p>
				<p class="li"><a href="pzk1.html">同城</a></p>
				<p class="li"><a href="position.html">职位</a></p>
					<p class="lis"><a href="">职位</a></p>
					<p class="lis"><a href="">公司</a></p>
					<p class="lis"><a href="">+发布职位</a></p>
				<p class="li"><a href="pzk2.html">活动</a></p>
					<p class="lis"><a href="">设计大赛</a></p>
					<p class="lis"><a href="">公司专题策划</a></p>
					<p class="lis"><a href="">线上活动</a></p>
					<p class="lis"><a href="">线下活动</a></p>
					<p class="lis"><a href="">需为吸引瓶</a></p>
				<p class="li"><a href="index3.html">正版素材</a></p>
					<p class="lis"><a href="index3.html">图片</a></p>
					<p class="lis"><a href="">视频</a></p>
					<p class="lis"><a href="index4.html">字体</a></p>
					<p class="lis"><a href="">音乐</a></p>
				<p class="li"><a href="course.html" target="_blank">课程</a></p>
					<p class="lis"><a href="">正在热销</a></p>
					<p class="lis"><a href="">口碑好课</a></p>
				<p class="li"><a href="">...</a></p>	
					<p class="lis"><a href="榜单.html">榜单</a></p>
					<p class="lis"><a href="设计师.html">设计师</a></p>
					<p class="lis"><a href="站酷APP.html">站酷APP</a></p>
					<p class="lis"><a href="字体库.html">站酷字体</a></p>
			</div>
			<img src="img/pan3/logo.svg" class="pull-left logo"/>
			<nav class="pull-left">
				<ul class="nav pull-left clearfix">
					<li>
						<a href="index.html">首页</a>
					</li>
					<li>
						<a href="index5.html">发现</a>
						<div class="fx">
							<div class="top">
								<div><a href="">平面</a><span>|</span></div>	
								<div><a href="">UI</a><span>|</span></div>	
								<div><a href="">网页</a><span>|</span></div>	
								<div><a href="">插画</a><span>|</span></div>	
								<div><a href="">动漫</a><span>|</span></div>	
								<div><a href="">摄影</a><span>|</span></div>	
								<div><a href="">空间</a><span>|</span></div>	
								<div><a href="">工业/产品</a><span>|</span></div>	
								<div><a href="">三维</a><span>|</span></div>	
								<div><a href="">影视</a><span>|</span></div>	
								<div><a href="">手工艺</a><span>|</span></div>	
								<div><a href="">纯艺术</a><span>|</span></div>	
								<div><a href="">服装</a><span>|</span></div>	
								<div><a href="">其他</a><span>|</span></div>	
											
							</div>
							<hr/>
							<div class="bottom">
								<a href="">精选作品&nbsp;></a>
								<a href="">精选文章&nbsp;></a>
								<a href="">精选收藏&nbsp;></a>
							</div>
						</div>
					
					</li>
					<li><a href="pzk1.html">同城</a></li>
					<li>
						<a href="position.html">职位</a>
						<div class="zw">
							<p><a href="">职位</a></p>
							<p><a href="">公司</a></p>
							<p><a href="">+发布职位</a></p>
						</div>
					</li>
					<li>
						<a href="pzk2.html">活动</a>
						<div class="zw">
							<p><a href="">设计大赛</a></p>
							<p><a href="">公司专题策划</a></p>
							<p><a href="">线上活动</a></p>
							<p><a href="">线下活动</a></p>
							<p><a href="">学习音频</a></p>
						</div>
					</li>
					<li>
						<a href="index3.html">正版素材</a>
						<div class="zw">
							<p><a href="index3.html">图片</a></p>	
							<p><a href="">视频</a></p>
							<p><a href="index4.html">字体</a></p>
							<p><a href="">音乐</a></p>
						</div>
					</li>
					<li>
						<a href="course.html" target="_blank">课程</a>
						<div class="zw">
							<p><a href="">正在热销</a></p>
							<p><a href="">口碑好课</a></p>
						</div>
					</li>
					<li>
						<a href=""></a>
						<div class="zw">
							<p><a href="榜单.html">榜单</a></p>
							<p><a href="设计师.html">设计师</a></p>
							<p><a href="站酷APP.html">站酷APP</a></p>
							<p><a href="字体库.html">站酷字库</a></p>
						</div>
					</li>
				</ul>
			</nav>
			
			<div class="log">
				<a href=""></a>
			</div>
			<div class="log">
				<a href=""></a>
			</div>
			<span><a href="">登录</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="">注册</a></span>
			<div class="search">
				<div class="search_top">
					<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<input type="text" name="" id="" />
					<img src="img/pan3/seach.svg"/>
				</div>
					<div class="search_bot">
						<div class="search1">热门搜索</div>
						<div class="search2">2019毕业展</div>
						<div class="search2">青春答卷2018</div>
						<div class="search2">2018毕业展</div>
						<div class="search2">青春答卷2018</div>
						<div class="search2">我是毕业生</div>
					</div>
			</div>
		</header>
		
		<!--轮播图-->
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			  <!-- Indicators -->
			  <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			  </ol>
			
			  <!-- Wrapper for slides -->
			  <div class="carousel-inner" role="listbox">
			    <div class="item active">
			      <img src="img/pan3/banner4.jpg" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			    <div class="item">
			      <img src="img/pan3/banner5.jpg" alt="...">
			      <div class="carousel-caption">
			        
			      </div>
			    </div>
			    <div class="item">
			      <img src="img/pan3/banner6.jpg" alt="...">
			      <div class="carousel-caption">
			      </div>
			    </div>
			  </div>
			
			  <!-- Controls -->
			  <a class="left " href="#carousel-example-generic" role="button" data-slide="prev">
			    <!--<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" id="leftotn" ></span>-->
			    <span class="leftControl"><img src="img/pan3/oo.png"/></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right " href="#carousel-example-generic" role="button" data-slide="next">
			    <!--<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" id="rightotn"></span>-->
			    <span class="rightControl"><img src="img/pan3/pp.png"/></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
			
			
			
			
			
		<!--右边固定定位-->
			
		
		
			<div class="desBook">
				<section>
					<ul class="top_dou">
						<li>
							<div class="top_li">
						<div class="top_li_one">
							<img src="img/pan3/c7.jpg" id="left_one"/>
							<img src="img/pan3/tb3.png" id="left_two"/>
							<div class="H5">H5+营销设计手册：创意、视觉、实战</div>
							<div class="su">苏杭（小呆）</div>
							<div class="shendu">深度解析自媒体邀请函 、个人简历 、企业幻灯片、
								电子宣传册等传播案例，系统总结H5的营销设计创意与视觉实战设计方法。</div>
							<div class="ren">人民邮电出版社</div>
							<span class="red_cotn">立即购买</span>
						</div>
					</div>
						</li>
						<li>
							<div class="top_li">
						<div class="top_li_one">
							<img src="img/pan3/tb2.png" id="right_one"/>
							<img src="img/pan3/tb3.png" id="right_two"/>
							<div class="H5">2018站酷奖设计年鉴</div>
							<div class="su">站酷</div>
							<div class="shendu">2018年的爆款作品集！知名设计创意人评审的走心挑选和点评，191组近年最具人气商业佳作，
								427页特种纸精美印刷呈现！其中收录的获奖作品，均是商业价值和艺术价值同时获得认可的佳作。</div>
							<div class="ren">迪赛纳DesignerBooks</div>
							<span class="red_cotn">立即购买</span>
						</div>
					</div>
						</li>
					</ul>
				</section>
			</div>
			
			
			
			<div class="bigbig">
				<div class="section2">
					<div class="first">最新站酷推荐图书<p>LATEST RECOMMENDED</p></div>
					<div class="AboutBox">
						<ul>
							<li>
								<div class="img1"><img src="img/pan3/c14.png"/></div>
								
								<div class="su">机甲风暴</div>
								<div class="shendu">陈凡（站酷ID：小鸡出殻）</div>
								<div class="ren">变形金刚、高达、科幻欣赏、游戏动漫、影视机甲设计机械概念设计书。</div>
								<span class="red_cotn">立即购买</span>
							</li>
						</ul>
					</div>
					<div class="oneimg">
						<a href=""><img src="img/pan3/ad3.jpg"/></a>
					</div>
					<div class="moreBook">
						<div id="leftNav">
							<ul>
								<li><a href="" onclick="return false">平面设计</a></li>
								<li><a href="" onclick="return false">UI/UX</a></li>
								<li><a href="" onclick="return false">网页/电商</a></li>
								<li><a href="" onclick="return false">插画/手绘/漫画</a></li>
								<li><a href="" onclick="return false">摄影</a></li>
								<li><a href="" onclick="return false">其他</a></li>
							</ul>
						</div>
						<div id="rightUl">
							<div class="design">
								平面设计<p>GRAPHIC DESIGN</p>
							</div>
							<ul>
								<li>
									<div class="iimg">
										<span class="leftTop"></span>
										<img src="img/pan3/c17.png"/>
									</div>
									<div class="japan">去日本上设计课3：信息图表设计</div>
									<div class="sheji">设计零基础也能看懂的好教程！读图时代设计师必须掌握的基本技能。</div>
									<span class="red_cotn" >立即购买</span>
								</li>
							
							</ul>
						</div>
					</div>
					<div class="review"><div class="first">最新站酷推荐图书<p>LATEST RECOMMENDED</p></div></div>
					
					
					
					


<!--轮播图内容撰写-->
					 <!--<div class="big_lunbotu2">
					 	<div class="lunbotu2">
						<div class="saveImg"><img src="img/pan3/retale.jpg"/></div>
						<div class="lunbotu_top">《排版的风格》：梳理风格发展的脉络，超越潮流表象的束缚
							<p><a href="">站酷沙龙回顾</a></p>
						</div>
						<div class="lunbotu_bottom"><a href="">为什么排版书那么多，却总是感觉缺了一本？缺少对设计史的梳理，就会被流行的表象牵制。</a></div>
					</div>
					 </div>
-->

					









					<div id="aa" class="carousel slide" data-ride="carousel" style="width: 1130px;height: 375px;margin-top: 6s0px;"> 
					  <ol class="carousel-indicators" style="bottom: -60px;">
					    <li data-target="#aa" data-slide-to="0" class="active"></li>
					    <li data-target="#aa" data-slide-to="1"></li>
					    <li data-target="#aa" data-slide-to="2"></li>
					  </ol>
					
					  <div class="carousel-inner" role="listbox">
					    <div class="item active">
					       <div class="big_lunbotu2">
										 	<div class="lunbotu2">
											<div class="saveImg"><img src="img/pan3/retale.jpg"/></div>
											<div class="lunbotu_top">《排版的风格》：梳理风格发展的脉络，超越潮流表象的束缚
												<p><a href="">站酷沙龙回顾</a></p>
											</div>
											<div class="lunbotu_bottom"><a href="">为什么排版书那么多，却总是感觉缺了一本？缺少对设计史的梳理，就会被流行的表象牵制。</a></div>
										</div>
										 </div>
					      <div class="carousel-caption">
					        ...
					      </div>
					    </div>
					    <div class="item">
					       <div class="big_lunbotu2">
										 	<div class="lunbotu2">
											<div class="saveImg"><img src="img/pan3/asd.jpg"/></div>
											<div class="lunbotu_top">左手韩《那一年》：左手韩不为人知的创作故事，致敬漫画人的追梦青春
												<p><a href="">站酷沙龙回顾，左手韩新书分享签售会</a></p>
											</div>
											<div class="lunbotu_bottom"><a href="">人气漫画家们的成长心路历程——被催更的漫画家们痛苦和焦虑着什么？抛出来的梗读者不笑怎么办？走进漫画家的内心，聊聊他们的创作日常。</a></div>
										</div>
										 </div>
					      <div class="carousel-caption">
					      </div>
					    </div>
					    <div class="item">
					       <div class="big_lunbotu2">
										 	<div class="lunbotu2">
											<div class="saveImg"><img src="img/pan3/retale3.jpg"/></div>
											<div class="lunbotu_top">《设计的修养》新书分享会：书籍泰斗吕敬人对话建筑大师张永和
												<p><a href="">站酷沙龙回顾</a></p>
											</div>
											<div class="lunbotu_bottom"><a href="">张永和曾说，设计的修养就是文化的修养。做了一辈子设计的大师们，怎么看设计？看甲方？看“大众”？讲真，听了这场神仙对话很受启发！</a></div>
										</div>
										 </div>
					      <div class="carousel-caption">
					      </div>
					    </div>
					  </div>
					
					  <a class="left " href="#aa" role="button" data-slide="prev">
					    <!--<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>-->
					    <img src="img/pan3/tleft.png" id="LL"/>
					    <span class="sr-only">Previous</span>
					  </a>
					  <a class="right " href="#aa" role="button" data-slide="next">
					    <!--<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>-->
					    <img src="img/pan3/tr.png" id="RR"/>
					    <span class="sr-only">Next</span>
					  </a>
					</div>
					
					
					
					
					
				</div>
			</div>
			<div class="article">精品文章<p>ARTICLE</p></div>
			
						

				
		
		<!--第三个轮播图-->
		
		
		
			<div class="box">
				<img src="img/pan3/tleft.png" id="LLL"/>
				 <img src="img/pan3/tr.png" id="RRR"/>
				<div class="mad">
				
				<ul>
					<li><div class="in"><b>飞行猴：用天马行空的笔触，打破墨守成规的沉闷</b><br /><br /><br />
						他是山里无拘无束、上天入地的“野孩子”，长大后把大自然的奇异与繁茂收进了画中。</div>
						<img src="img/pan3/011c055d3ef594a8012187f4f61d4d.jpg@520w_390h_1c_1e_1o_100sh (1)aa.jpg"/>
					</li>
					<li><div class="in"><b>张永和：为了好生活，选择好设计</b><br /><br /><br />
						资深时尚总编对谈国际建筑大师，读了之后，真的有所启发和感悟。好东西总是值得等待，不是吗？</div>
						<img src="img/pan3/011e725c765faaa801213f26e2b705.jpg@520w_390h_1c_1e_1o_100sh.jpg"/>
					</li>
					<li><div class="in"><b>意外！不仅是快乐肥宅水，它竟是一家“设计公司”！ |  大卫·巴特勒谈设计与品牌</b><br /><br /><br />
						卓越的设计师们如何思考？ 引领设计师深度思考的创意对谈录，洞察商业王国的品牌思维～</div>
						<img src="img/pan3/013e245cef6af2a801209aa026adba.jpg@520w_390h_1c_1e_1o_100sh.jpg"/>
					</li>
					<li><div class="in"><b>读他的书等于在耶鲁大学听平面设计课 | 保罗·兰德谈logo设计的思考与绝望</b><br /><br /><br />
						令乔布斯折服的设计大师，谈关于创意、审美、直觉、客户关系，以及logo设计的经验。</div>
						<img src="img/pan3/01be1d5c83c221a80120af9aacf12f.jpg@520w_390h_1c_1e_1o_100sh.jpg"/>
					</li>
					<li><div class="in"><b>飞行猴：用天马行空的笔触，打破墨守成规的沉闷</b><br /><br /><br />
						他是山里无拘无束、上天入地的“野孩子”，长大后把大自然的奇异与繁茂收进了画中。</div>
						<img src="img/pan3/01cc7b5cc11f2da8012141686a8553.jpg@520w_390h_1c_1e_1o_100sh (1)q.jpg"/>
					</li>
					<li><div class="in"><b>如果生命是一场旅行，带什么上路才划算？ | 书单来了，喜欢就拿去！</b><br /><br /><br />
						安利好书的小Z来了～一份诚意满满的站酷编辑部2018私人书单献上～</div>
						<img src="img/pan3/01e6d75c493a56a801203d227f5d1f.jpg@520w_390h_1c_1e_1o_100sh.jpg"/>
					</li>
					<li><div class="in"><b>创造神秘感的设计 ｜ 有多少人因为他的设计而拿起一本书？恐怕只有天知道！</b><br /><br /><br />
						他是村上春树20多年来御用英文版书籍设计师。今天一起走进奇普·基德的设计世界～</div>
						<img src="img/pan3/011c055d3ef594a8012187f4f61d4d.jpg@520w_390h_1c_1e_1o_100sh (1)aa.jpg"/>
					</li>
					<li><div class="in"><b>飞行猴：用天马行空的笔触，打破墨守成规的沉闷</b><br /><br /><br />
						他是山里无拘无束、上天入地的“野孩子”，长大后把大自然的奇异与繁茂收进了画中。</div>
						<img src="img/pan3/011e725c765faaa801213f26e2b705.jpg@520w_390h_1c_1e_1o_100sh.jpg"/>
					</li>
				</ul>
			</div>
			</div>
		
		
			<div class="last">
				<div class="lastOne"><img src="img/pan3/ad2.jpg"/></div>
				<div class="lastTwo"><img src="img/pan3/zcool.png"/></div>
			</div>
		
		
		
		
		
		
		
		<footer>
			<div class="footerone">
				<ul class="leftul">
					<li><img src="img/pan3/footer-mobile.svg"/></li>
					<li><a href="">移动端</a></li>
					<li><a href="">关于我们</a></li>
					<li><a href="">加入酷站</a></li>
					<li><a href="">用户协议</a></li>
					<li><a href="">隐私政策</a></li>
					<li><a href="">侵权申诉</a></li>
					<li><a href="">企业服务</a></li>
					<li><a href="">帮助中心</a></li>
					<li><a href="">联系我们</a></li>
					<li><a href="">中文</a></li>
					<li><a href="">English</a></li>
				</ul>
				<ul class="rightul">
					<li><img src="img/pan3/footer-share-weixin.svg"/></li>
					<li><img src="img/pan3/footer-share-weibo.svg"/></li>
				</ul>
				<img src="img/pan3/footer-mobile-code.png" class="erweima_left"/>
				<img src="img/pan3/footer-weixin-code.jpg" class="erweima_right"/>
			</div>
			<div class="footertwo">
				<div class="footertwo_1">
					<ul>
						<li><a href="">京ICP备11017824号-4 </a></li>
						<li>|</li>
						<li><a href=""> 京ICP证130164号 </a></li>
						<li>|</li>
						<li><a href=""><span><img src="img/pan3/icon-police.png"/></span>京公网安备11010502000501号 </a></li>
						<li>|</li>
						<li><a href=""> 网络文化经营许可证 京网文[2016]6173-844号 </a></li>
						<li>|</li>
						<li><a href=""> 广播电视节目制作经营许可证（京）字第06990号</a></li>
					</ul>
				</div>
				<div class="footertwo_2">
					<span>营业执照</span>
					<span> 网上有害信息举报专区 </span>
					<span>不良信息举报电话：010-56538658</span>
					<span>举报邮箱 jubao@zcool.com.cn</span>
					<span>联系电话：010-56538600</span> 
					<span>Copyright © 2006-2019 ZCOOL站酷</span>
				</div>
			</div>
		</footer>
		
		
		
		
		
		
		
		
		
		
		<ul class="rightNav">
					<img src="img/pan3/rt.svg" class="yellow"/>
					<img src="img/pan3/code.png" class="erweima"/>
					<img src="img/pan3/rt.svg" class="yellow2"/>
					
				<li>小Z书房</li>
				<li><div class="texts">
						像做设计一样打</br>磨内容，梳理设</br>计的逻辑，传播</br>生活的美学。
					</div></li>
			</ul>
			
			
			
			
			
			
			
			
			<!--点击回到顶部-->
			<span class="coming"><img src="img/pan3/tt.png"/></span>
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/bootstrap.js"></script>
		<script>
			   	
			   	
			   	
			   	
			   	
			   	
		   		//header
			//搜索图标点击出现搜索框
				$('.log:first').click(function(e){
					e.preventDefault();
					$('.search').fadeIn(1000);					
//					$(this).fadeOut(1000);
					$(".search input").click(function(e){
						 $(".search").fadeIn(1000);
						 e.stopPropagation();
	    			});
	    			$(window).click(function(e){
				        $(".search").fadeOut(1000);
					});
				});
				$(".log:first").click(function(e){
       				 e.stopPropagation();
    });
				//menus隐藏菜单栏	
				$('.menu').click(function(){
					$('.menus').addClass('menu1')
					
				});
				$('.menus .li button').click(function(){
					$('.menus').removeClass('menu1')
					
				})
				
				
				
				
//				
				$('.carousel').carousel({
					  interval: 90000000
					})
				
				
				$('.red_cotn').hover(function(){
					$(this).css({'background':'red','color':'white'})
				},function(){
					$(this).css({'background':'white','color':'red'})
				})
				
				
				
				$('.rightNav li:nth-of-type(2)').hover(function(){
					$('.erweima').css('display','inline-block');
					$('.yellow').css('display','inline-block')
				},function(){
					
					$('.erweima').css('display','none');
					$('.yellow').css('display','none')
				
				})
//					
//					
				$('.rightNav li:nth-of-type(1)').hover(function(){
					$('.texts').css('display','inline-block');
					$('.yellow2').css('display','inline-block')
				},function(){
					
					$('.texts').css('display','none');
					$('.yellow2').css('display','none')
				
				})
				
				
				
				
				
				
				
				
				
				
				$('.moreBook #rightUl ul li .red_cotn').hover(function(){
					$(this).css({'background':'#0DCCFF','color':'white'})
				},function(){
					$(this).css({'background':'#white','color':'#0DCCFF'})
				})
				
				
				
				
				
				
				
				
				
				
				
				
//				克隆列表
				var imgs=['img/pan3/c14.png','img/pan3/c12.png','img/pan3/c16.png','img/pan3/c19.png','img/pan3/c21.png'];
				var sus=['写给UI设计师的设计书','去日本上设计课3','去日本上设计课2','版式设计原理','UI设计启示录'];
				var shendus=['王涵（站酷ID：牛MO王）','[日]樱田润','[日]柘植hiropon','[日] 甲谷一','王涵、艾琦 、张怡琪、 刘佳'];
				var rens=['牛MO王设计心得第二版；设计不会有捷径，但这本书可以让你少走弯路。','[设计零基础也能看懂的好教程！读图时代设计师必须掌握的基本技能。',
							'53个设计案例修改前&修改后的对比，附有具体CMYK色值，传授色彩搭配的黄金法则。',
							'设计零基础，也能看懂的版式设计教程。','BIGD团队力作，商业案例的深刻剖析和原理讲解，提升审美，直击UI设计核心。']
				for(var i=0;i<imgs.length;i++){
					var NewLi=$('.AboutBox ul li:nth-of-type(1)').clone(true);
					NewLi.children('.img1').children('img').attr('src',imgs[i]);
					NewLi.children('.su').html(sus[i]);
					NewLi.children('.shendu').html(shendus[i]);
					NewLi.children('.ren').html(rens[i]);
					$('.AboutBox ul').append(NewLi);
				}
				
				
				
//				左侧导航栏滚轮事件
				$(window).scroll(function(){
			    var k=$(window).scrollTop();
			    console.log($(window).scrollTop())                                                                                         
			    if(2700<=k&&k<3100){
			     $('#leftNav ul').css({'position':'fixed','top':'0px','left':'110px'});
			     console.log(1)
			     $('#leftNav ul li').eq(0).css('background','#FFE300').siblings().css('background','white')
				}else if(3100<=k&&k<3600){
			    	$('#leftNav ul').css({'position':'fixed','top':'0px','left':'110px'});
			     $('#leftNav ul li').eq(1).css('background','#FFE300').siblings().css('background','white')
			    }else if(3600<=k&&k<3800){
		    	    $('#leftNav ul').css({'position':'fixed','top':'0px','left':'110px'});
			     $('#leftNav ul li').eq(2).css('background','#FFE300').siblings().css('background','white')
			    }else if(3800<=k&&k<4000){
			    	$('#leftNav ul').css({'position':'fixed','top':'0px','left':'110px'});
			     $('#leftNav ul li').eq(3).css('background','#FFE300').siblings().css('background','white')
			    }else if(4000<=k&&k<4900){
			    	$('#leftNav ul').css({'position':'fixed','top':'0px','left':'110px'});
			     $('#leftNav ul li').eq(4).css('background','#FFE300').siblings().css('background','white')
			    }else if(4900<=k&&k<5500){
			    	$('#leftNav ul').css({'position':'fixed','top':'0px','left':'110px'});
			     $('#leftNav ul li').eq(5).css('background','#FFE300').siblings().css('background','white')
			    }else{
			     $('#leftNav ul').css({'position':'relative','top':'0px','left':'0px'});
			    }
//			    
			   })
				
				
				
				
				$('.section2 .moreBook #leftNav ul li').eq(0).click(function(){
					$("html,body").animate({scrollTop:2900},500);
				})
				$('.section2 .moreBook #leftNav ul li').eq(1).click(function(){
					$("html,body").animate({scrollTop:3400},500);
				})
				$('.section2 .moreBook #leftNav ul li').eq(2).click(function(){
					$("html,body").animate({scrollTop:3700},500);
				})
				$('.section2 .moreBook #leftNav ul li').eq(3).click(function(){
					$("html,body").animate({scrollTop:3900},500);
				})
				$('.section2 .moreBook #leftNav ul li').eq(4).click(function(){
					$("html,body").animate({scrollTop:4200},500);
				})
				$('.section2 .moreBook #leftNav ul li').eq(5).click(function(){
					$("html,body").animate({scrollTop:5100},500);
				})
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
//				鼠标移入图片放大
				$('.AboutBox ul li .img1 img').hover(function(){
					$(this).css('transform','scale(1.05)');
//					
				},function(){
					$(this).css('transform','none');
				})
				
				
				$('.moreBook #rightUl ul li .iimg img').hover(function(){
					$(this).css('transform','scale(1.05)');
//					
				},function(){
					$(this).css('transform','none');
				})
				
				
				
				var oimg=['img/pan3/c15.png','img/pan3/c18.png','img/pan3/c20.png','img/pan3/c5.png','img/pan3/bl65.png',
				'img/pan3/bl71.png','img/pan3/bl63.png','img/pan3/c4.png','img/pan3/bl64.png','img/pan3/bl66.png','img/pan3/bl67.png',
				'img/pan3/bl68.png','img/pan3/bl70.png','img/pan3/c15.png','img/pan3/c18.png','img/pan3/c20.png','img/pan3/c5.png','img/pan3/bl65.png','img/pan3/bl67.png','img/pan3/bl63.png','img/pan3/c4.png','img/pan3/bl64.png','img/pan3/bl66.png'
				];
				var ojapan=['信息图表设计','平面设计中的网格系统','视觉传达设计',
				'跨媒介广告创意与设计','字演：字体设计与应用全攻略','排版的风格',
				'纸版墨色工：视觉设计工具手册','品牌设计法则','设计几何学','信息图表设计','平面设计中的网格系统','视觉传达设计',
				'跨媒介广告创意与设计','字演：字体设计与应用全攻略','排版的风格',
				'网格系统与版式设计','字不语：手写字体设计与应用方法解析',
				'纸版墨色工：视觉设计工具手册','品牌设计法则','设计几何学','信息图表设计','平面设计中的网格系统','视觉传达设计']
				var kd=['53个设计案例修改前&修改后的对比，附有具体CMYK色值，传授色彩搭配的黄金法则',
						'布局×字体×配色×图片 四大设计难题，各个突破，点石成金！设计零基础也能看懂。',
						'平面设计、字体编排和空间设计的视觉传达设计手册。',
						'国外多所高校指定教材，囊括全球创意，从理论到应用的视觉设计全面指南。',
						'国外多所高校指定教材，全面剖析社交媒体时代广告创意和设计策略、形式与案例。',
						'全方位解读包括字体选择、字形调整、文字编排、字效制作、商业字体的字体设计书！',
						'将排版分成三大基本风格，并对衍生出的子风格加以解读。详细解说了西文与汉字的网格系统。',
						'台湾设计师王炳南30多年设计工作实战经验，帮助你快速掌握设计的落地技巧。',
						'带你突破品牌设计瓶颈，全面提升品牌设计系统性认知，更有众多品牌案例深度解析。',
						'设计师多基础必修课，畅销15年的设计基础教学里程碑之作。教你打好设计基础。',
						'设计师多基础必修课，畅销15年的设计基础教学里程碑之作。让版式设计更加科学。',
						'设计师多基础必修课，畅销15年的设计基础教学里程碑之作。重新诠释布罗克曼的网格理论。',
						'国外多所高校指定教材，囊括全球创意，从理论到应用的视觉设计全面指南。',
						'国外多所高校指定教材，全面剖析社交媒体时代广告创意和设计策略、形式与案例。',
						'全方位解读包括字体选择、字形调整、文字编排、字效制作、商业字体的字体设计书！',
						'将排版分成三大基本风格，并对衍生出的子风格加以解读。详细解说了西文与汉字的网格系统。',
						'台湾设计师王炳南30多年设计工作实战经验，帮助你快速掌握设计的落地技巧。',
						'带你突破品牌设计瓶颈，全面提升品牌设计系统性认知，更有众多品牌案例深度解析。',
						'国外多所高校指定教材，全面剖析社交媒体时代广告创意和设计策略、形式与案例。',
						'全方位解读包括字体选择、字形调整、文字编排、字效制作、商业字体的字体设计书！',
						'将排版分成三大基本风格，并对衍生出的子风格加以解读。详细解说了西文与汉字的网格系统。',
						'台湾设计师王炳南30多年设计工作实战经验，帮助你快速掌握设计的落地技巧。',
						'带你突破品牌设计瓶颈，全面提升品牌设计系统性认知，更有众多品牌案例深度解析。',
						'设计师多基础必修课，畅销15年的设计基础教学里程碑之作。教你打好设计基础。'
				]
				for(var j=0;j<oimg.length;j++){
					var Newlis=$('.moreBook #rightUl ul li:first-child').clone(true);
					console.log( Newlis.length)
					Newlis.children('.iimg').children('img').attr('src',oimg[j]);
					Newlis.children('.japan').html(ojapan[j]);
					Newlis.children('.sheji').html(kd[j]);
					
					$('.moreBook #rightUl ul').append(Newlis);
				}
				
	
////		

//				第三个轮播图点击事件
				var i=0;
				$('#LLL').click(function(){
					i--;
					if(i==-1){
						i=5;
					}
					
					$('.mad ul').css('margin-left',-383*i+'px')
				})
				
				$('#RRR').click(function(){
					i++;
					console.log(i);
					if(i==6){
						i=0;
					}
					
					$('.mad ul').css('margin-left',-383*i+'px')
				})
				
				
				
				
				
				
				$('.mad ul li').hover(function(){
					$(this).children('.in').css({'opacity':'1','transform':'scale(1)'})
				},function(){
					$(this).children('.in').css({'transform':'scale(0.5)','opacity':'0'})
				})
				
				
				
				
				
				 	
//		   	footer的点击事件
		   	$('.leftul li').eq(1).hover(function(){
		   		$('.erweima_left').css('display','inline-block');
		   	},function(){
		   		$('.erweima_left').css('display','none');
		   	})
		   	
		   	$('.rightul li').eq(0).hover(function(){
		   		$('.erweima_right').css('display','inline-block');
		   		$(this).children('img').attr('src','img/pan3/footer-share-weixinhover.svg');
		   	},function(){
		   		$('.erweima_right').css('display','none');
		   		$(this).children('img').attr('src','img/pan3/footer-share-weixin.svg')
		   	})
		   	$('.rightul li').eq(1).hover(function(){
		   		$(this).children('img').attr('src','img/pan3/footer-share-weibohover.svg');
		   	},function(){
		   		$(this).children('img').attr('src','img/pan3/footer-share-weibo.svg');
		   	})
		   	
		   	
				
				
				
//				第一个轮播图左右按钮移入移出事件
			$('#carousel-example-generic').hover(function(){
				$('.leftControl,.rightControl').css('opacity','1')
			},function(){
				$('.leftControl,.rightControl').css('opacity','0')
			})
			$('.leftControl,.rightControl').hover(function(){
				$(this).css('background','rgba(0,0,0,1)')
			},function(){
				$(this).css('background','rgba(0,0,0,0.5)')
			})
			
			
			
			
			
//			点击回到顶部
			
//			到700就出现
			$(window).scroll(function(){
				var q=$(window).scrollTop();
				if(q>=700){
					$('.coming').css('display','inline-block');
				}else{
					$('.coming').css('display','none');
				}
			})
			
//			鼠标移进换图片
			
			$('.coming').hover(function(){
				$('.coming').children('img').attr('src','img/pan3/ttblack.png');
			},function(){
				$('.coming').children('img').attr('src','img/pan3/tt.png');
			})
			
//			点击回到顶部
			$('.coming').click(function(){
				
				 $('html,body').animate({scrollTop:0}, 0);
			})
			
		</script>
	</body>
</html>

    